<template>
  <V-CommonHeaderLeft>
    <div class="allocate">
      <Navigation :msg="navMsg"></Navigation>
      <div>
        <el-table ref="multipleTable"
                  :data="stock"
                  style="width: 100%;"
                  :height="tableHeight"
                  class="table-class">
          <el-table-column type="index"
                           min-width="5%"
                           label="序号"></el-table-column>
          <el-table-column prop="id"
                           label="调拨单号"
                           min-width="10.56%"
                           sortable>
            <template slot-scope="scope">
              <span :title="scope.row.id">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="outStock"
                           min-width="10.56%"
                           label="调出仓库">
            <template slot-scope="scope">
              <span :title="scope.row.outStock">{{ scope.row.outStock }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inStock"
                           min-width="10.56%"
                           label="调入仓库">
            <template slot-scope="scope">
              <span :title="scope.row.inStock">{{ scope.row.inStock }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderStatus"
                           min-width="10.56%"
                           label="单据状态">
            <template slot-scope="scope">
              <span :title="scope.row.orderStatus">{{ scope.row.orderStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="outTime"
                           min-width="10.56%"
                           label="调出时间"
                           sortable>
            <template slot-scope="scope">
              <span :title="scope.row.outTime">{{ scope.row.outTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inTime"
                           min-width="10.56%"
                           label="调入时间"
                           sortable>
            <template slot-scope="scope">
              <span :title="scope.row.inTime">{{ scope.row.inTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderPerson"
                           min-width="10.56%"
                           label="制单人">
            <template slot-scope="scope">
              <span :title="scope.row.orderPerson">{{ scope.row.orderPerson }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remarks"
                           min-width="10.52%"
                           label="备注">
            <template slot-scope="scope">
              <span :title="scope.row.remarks">{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
        </el-table>
        <Paging :msg="pageMsg.length"
                ref="fn"
                @pageNum="getPageNum"
                @pageId="getPageId"></Paging>
      </div>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      tableHeight: '',
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id
      navMsg: [
        {
          name: '仓库',
          path: '/outStock'
        },
        {
          name: '库存调拨',
          path: ''
        }
      ],
      stock: [],
      pageMsg: [
        {
          id: '11651641666',
          outStock: '深圳仓',
          inStock: '广州仓',
          orderStatus: '已完成',
          outTime: '2018-08-24 11:29:36',
          inTime: '2018-08-24 11:29:44',
          orderPerson: '陈素然',
          remarks: ''
        },
        {
          id: '2',
          outStock: '深圳仓',
          inStock: '广州仓',
          orderStatus: '已完成',
          outTime: '2018-08-24 11:29:46',
          inTime: '2018-08-24 11:29:54',
          orderPerson: '陈素然',
          remarks: ''
        }
      ]
    }
  },
  components: {
    Navigation,
    Paging,
    VCommonHeaderLeft
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 162 + 'px'
    },
    getPageId (id = 1) {
      this.pageId = id
      this.stock = this.$refs.fn.sliceArray(this.pageMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
    }
  },
  created () {
    this.stock = this.pageMsg
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  }
}
</script>
<style lang="scss" scoped>
.allocate {
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
  @mixin el-common($el-color, $el-height, $el-class) {
    padding: 0;
    color: $el-color;
    height: $el-height;
    line-height: $el-height;
    &:first-child {
      text-align: center;
      span {
        width: 16px;
        height: 16px;
      }
    }
    &:not(:first-child) {
      #{$el-class} {
        width: 100%;
        line-height: 20px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  /deep/ .el-table__body-wrapper {
    overflow-y: hidden;
    &:hover {
      overflow-y: overlay;
    }
    &::-webkit-scrollbar {
      width: 8px;
      height: 50%;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
  /deep/ .table-class {
    font-size: 12px;
    padding: 0;
    tr {
      td {
        @include el-common(
          $el-color: #333,
          $el-height: 40px,
          $el-class: "span"
        );
        &:nth-child(2) {
          &:hover {
            cursor: pointer;
            color: #20bdeb;
          }
        }
      }
      th {
        @include el-common(
          $el-color: #666,
          $el-height: 50px,
          $el-class: ".cell"
        );
        font-weight: normal;
        background-color: #fcfcfc;
      }
    }
  }
}
</style>
